<template>
    <section style="transform:scale(0.9);transform-origin: 0 0;">
        <el-card>
            <DynamicForm :_config="nf0" use-page-title>
                <template slot="field-12138">
                    <h4>推荐使用render函数</h4>
                    我是自定义
                    我是自定义
                    我是自定义
                    我是自定义
                </template>
            </DynamicForm>
        </el-card>

        <el-card v-for="key in getConfigList()" :key="key">
            <DynamicForm :_config="vm[key]" use-page-title/>
            <Code>{{getString(vm[key])}}</Code>
        </el-card>
    </section>
</template>

<script>
    import DynamicForm from '../index.vue'

    export default {
        components: {
            DynamicForm,
            Code: {
                template: `<pre style="word-break: break-all;white-space: pre-wrap;max-height: 360px;overflow-y: auto;"><slot/></pre>`
            },
        },
        data() {
            this.vm = this
            this.nf0 = {
                pageTitle: '自定义slot',
                part: {
                    fields: [
                        {
                            required: true,
                            model: 'field-12138',
                            label: '穿梭框',
                            template: true,
                        }
                    ],
                },
            }
            Object.assign(this, {
                f999: {
                    pageTitle: 'dynamicFormCreate测试',
                    "cancel": {},
                    "edit": {"url": {}},
                    "create": {"url": {}},
                    "form": {"props": {"labelWidth": "140px", "labelPosition": "right", "size": "medium"}, "style": {}},
                    "parts": [{
                        "fields": [{
                            "size": 24,
                            "required": true,
                            "label": "字段名16370",
                            "model": "字段数据16370",
                            "fields": [{
                                "size": 24,
                                "required": true,
                                "label": "字段名24618",
                                "model": "字段数据24618",
                                "component": {"type": "el-input"}
                            }, {
                                "size": 24,
                                "required": true,
                                "label": "字段名16539",
                                "model": "字段数据16539",
                                "fields": [{
                                    "size": 24,
                                    "required": true,
                                    "label": "字段名24482",
                                    "model": "字段数据24482",
                                    "component": {"type": "el-input"}
                                }, {
                                    "size": 24,
                                    "required": true,
                                    "label": "字段名16706",
                                    "model": "字段数据16706",
                                    "component": {"type": "el-input"}
                                }]
                            }]
                        }]
                    }]
                },
                f0: {
                    pageTitle: 'ElementUI组件',
                    part: {
                        fields: [
                            {
                                required: true,
                                model: '穿梭框',
                                label: '穿梭框',
                                component: {
                                    type: 'el-transfer',
                                    props: {
                                        data: (_ => {
                                            const data = []
                                            for (let i = 1; i <= 15; i++) {
                                                data.push({
                                                    key: i,
                                                    label: `备选项 ${i}`,
                                                    disabled: i % 4 === 0
                                                })
                                            }
                                            return data
                                        })(),
                                    },
                                },
                            }
                        ],
                    },
                },
                f00: {
                    pageTitle: '高级render',
                    cancel: {
                        to() {
                            alert('当前页面为' + this.$route.fullPath)
                        },
                    },
                    part: {
                        fields: [
                            {
                                required: true,
                                model: 'render',
                                label: 'render',
                                render(h, context) {
                                    return <div>
                                        <input type="text" onInput={evt => context.listeners.input(evt.target.value)}/>
                                    </div>
                                },
                            },
                            {
                                required: true,
                                model: 'render',
                                label: '查看其他表单',
                                render(h, context) {
                                    return h({
                                            components: {
                                                DynamicForm,
                                            },
                                            template: `<section>
<el-button @click="show = true">预览模式</el-button>
<el-dialog
  title="预览表单"
  :visible.sync="show"
  :append-to-body="true">
  <DynamicForm _cid="page" _mid="108989001297432576" preview/>
</el-dialog>
</section>`,
                                            data() {
                                                return {
                                                    show: false,
                                                }
                                            },
                                        }
                                    )
                                },
                            }
                        ],
                    },
                },

                f2: {
                    pageTitle: '图片上传',
                    part: {
                        fields: [
                            {
                                required: true,
                                model: '单张图片',
                                label: '单张图片',
                                component: {
                                    type: 'upload:img',
                                },
                            },
                            {
                                required: true,
                                model: '多张图片',
                                label: '多张图片',
                                component: {
                                    type: 'upload:imgs',
                                },
                            }
                        ],
                    },
                },
                f3: {
                    part: {
                        fields: [
                            {
                                required: true,
                                model: '级联',
                                label: '级联',
                                component: {
                                    type: 'select-grade',
                                    length: 4,

                                    label: 'name',
                                    value: 'code',
                                    api: {
                                        url: {
                                            method: 'get',
                                            module: 'productBrand',
                                            value: 'getBaseData'
                                        },
                                        dataField: 'obj.list',

                                        levelField: 'level',
                                        parentField: 'parentCode',
                                    },
                                },
                            }
                        ],
                    },
                },
                f4: {
                    pageTitle: 'select、radio、checkbox',
                    part: {
                        fields: [
                            {
                                size: 12,
                                required: true,
                                model: '下拉框 - 单选',
                                label: '下拉框 - 单选',
                                component: {
                                    type: 'select',
                                    async: true,

                                    label: 'name',
                                    value: 'code',
                                    api: {
                                        url: {
                                            method: 'get',
                                            module: 'productBrand',
                                            value: 'getBaseData'
                                        },
                                        dataField: 'obj.classify.list',
                                        payload: {
                                            level: 1,
                                            parentCode: '',
                                        }
                                    },
                                },
                            },
                            {
                                size: 12,
                                required: true,
                                model: '下拉框 - 多选',
                                label: '下拉框 - 多选',
                                component: {
                                    type: 'select',
                                    async: true,

                                    label: 'name',
                                    value: 'code',
                                    api: {
                                        url: {
                                            method: 'get',
                                            module: 'productBrand',
                                            value: 'getBaseData'
                                        },
                                        dataField: 'obj.classify.list',
                                        payload: {
                                            level: 1,
                                            parentCode: '',
                                        }
                                    },
                                    props: {
                                        multiple: true,
                                    },
                                },
                            },
                            {
                                required: true,
                                model: '复选框',
                                label: '复选框',
                                component: {
                                    type: 'checkbox',
                                    async: true,

                                    label: 'name',
                                    value: 'code',
                                    api: {
                                        url: {
                                            method: 'get',
                                            module: 'productBrand',
                                            value: 'getBaseData'
                                        },
                                        dataField: 'obj.classify.list',
                                        payload: {
                                            level: 1,
                                            parentCode: '',
                                        }
                                    },
                                },
                            },
                            {
                                required: true,
                                model: '单选框',
                                label: '单选框',
                                component: {
                                    type: 'radio',
                                    async: true,

                                    label: 'name',
                                    value: 'code',
                                    api: {
                                        url: {
                                            method: 'get',
                                            module: 'productBrand',
                                            value: 'getBaseData'
                                        },
                                        dataField: 'obj.classify.list',
                                        payload: {
                                            level: 1,
                                            parentCode: '',
                                        }
                                    },
                                },
                            },
                            {
                                labelPosition: 'left',
                                model: '同步',
                                label: '# 同步版本',
                                fields: [
                                    {
                                        size: 12,
                                        required: true,
                                        model: '下拉框 - 单选',
                                        label: '下拉框 - 单选',
                                        component: {
                                            type: 'select',

                                            label: 'label',
                                            value: 'value',

                                            options: [
                                                {
                                                    value: '选项1',
                                                    label: '黄金糕'
                                                }, {
                                                    value: '选项2',
                                                    label: '双皮奶',
                                                }, {
                                                    value: '选项3',
                                                    label: '蚵仔煎'
                                                }, {
                                                    value: '选项4',
                                                    label: '龙须面'
                                                }, {
                                                    value: '选项5',
                                                    label: '北京烤鸭'
                                                }
                                            ],
                                        },
                                    },
                                    {
                                        size: 12,
                                        required: true,
                                        model: '下拉框 - 多选',
                                        label: '下拉框 - 多选',
                                        component: {
                                            type: 'select',
                                            label: 'label',
                                            value: 'value',
                                            options: [
                                                {
                                                    value: '选项1',
                                                    label: '黄金糕'
                                                }, {
                                                    value: '选项2',
                                                    label: '双皮奶',
                                                }, {
                                                    value: '选项3',
                                                    label: '蚵仔煎'
                                                }, {
                                                    value: '选项4',
                                                    label: '龙须面'
                                                }, {
                                                    value: '选项5',
                                                    label: '北京烤鸭'
                                                }
                                            ],
                                            props: {
                                                multiple: true,
                                            },
                                        },
                                    },
                                    {
                                        required: true,
                                        model: '复选框',
                                        label: '复选框',
                                        component: {
                                            type: 'checkbox',
                                            label: 'label',
                                            value: 'value',
                                            options: [
                                                {
                                                    value: '选项1',
                                                    label: '黄金糕'
                                                }, {
                                                    value: '选项2',
                                                    label: '双皮奶',
                                                }, {
                                                    value: '选项3',
                                                    label: '蚵仔煎'
                                                }, {
                                                    value: '选项4',
                                                    label: '龙须面'
                                                }, {
                                                    value: '选项5',
                                                    label: '北京烤鸭'
                                                }
                                            ],
                                        },
                                    },
                                    {
                                        required: true,
                                        model: '单选框',
                                        label: '单选框',
                                        component: {
                                            type: 'radio',
                                            label: 'label',
                                            value: 'value',
                                            props: {
                                                style: {
                                                    backgroundColor: 'red',
                                                },
                                            },
                                            options: [
                                                {
                                                    value: '选项1',
                                                    label: '黄金糕'
                                                }, {
                                                    value: '选项2',
                                                    label: '双皮奶',
                                                }, {
                                                    value: '选项3',
                                                    label: '蚵仔煎'
                                                }, {
                                                    value: '选项4',
                                                    label: '龙须面'
                                                }, {
                                                    value: '选项5',
                                                    label: '北京烤鸭'
                                                }
                                            ],
                                        },
                                    },
                                ],
                            },
                        ],
                    },
                },

                // 其它组件
                f1: {
                    pageTitle: '其它组件',
                    part: {
                        fields: [
                            {
                                required: true,
                                model: '富文本',
                                label: '富文本',
                                component: {
                                    type: 'wangeditor',
                                },
                            },
                            {
                                required: true,
                                model: '数字',
                                label: '数字',
                                component: {
                                    type: 'number',
                                    props: {
                                        controls: false,
                                        min: 1,
                                        max: 5,
                                        placeholder: '请输入0-5的数字'
                                    },
                                },
                            },
                            {
                                required: true,
                                model: '文本框',
                                label: '文本框',
                                component: {
                                    type: 'textarea',
                                    maxlength: 200,
                                },
                            },
                        ],
                    },
                },
                f8: {
                    pageTitle: '自定义操作按钮',
                    operates: {
                        log: {
                            type: 'el-button',
                            text: '打印数据',
                            props: {
                                type: 'warning'
                            },
                            listeners: {
                                click() {
                                    console.log(this.model)
                                },
                            },
                        },
                        create: {
                            type: 'el-button',
                            text: '自定义提交',
                            props: {
                                type: 'error'
                            },
                            listeners: {
                                click() {
                                    alert(JSON.stringify(this.model))
                                },
                            },
                        },
                    },
                    cancel: {
                        text: '自定义取消',
                        // to: '/home/dynamicList/page',
                        to() {
                            console.log(this._uid)
                        },
                    },
                    // create: {
                    //     text: '提交提交',
                    //     url: {
                    //         method: 'get',
                    //         module: 'productBrand',
                    //         value: 'getBaseData'
                    //     },
                    //     beforeAjax(payload) {
                    //         payload['?????????我是beforeAjax的数据'] = Math.random().toString(32)
                    //         // return '#$%^&*from beforeAjax'
                    //     },
                    // },
                },
            })
            return {
                show1: false,
            }
        },
        methods: {
            getString(any) {
                return JSON.stringify(any, function (k, v) {
                    if (typeof v === 'function') {
                        return v.toString().replace(/\s+/g, '')
                    }
                    return v
                }, 4)
            },
            getConfigList() {
                return Object.keys(this).filter(key => /^f/.test(key))
            },
        },
    }
</script>

<style lang="scss" scoped>
    .el-card:not(:last-child) {
        margin-bottom: 10px;
    }

    /deep/ {
        .wrapper-title {
            text-indent: 70px;
            margin-top: 0;
        }

        .el-card__body {
            display: flex;

            & > * {
                flex: 1;
            }

            pre {
                flex: unset;
                width: 300px;
                border: 1px solid red;
            }
        }

    }
</style>
